<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>扇形</title>
		<style>
			.pie {
				position: relative;
				margin: 1em auto;
				padding: 0;
				width: 32em;
				height: 32em;
				border-radius: 50%;
				list-style: none;
				overflow: hidden;
			}
			
			.slice {
				overflow: hidden;
				position: absolute;
				top: 0;
				right: 0;
				width: 50%;
				height: 50%;
				transform-origin: 0% 100%;
				color: red;
			}
			
			.slice-one {
				transform: rotate(30deg) skewY(-30deg);
				background: black;
			}
			
			.slice-two {
				transform: rotate(-30deg) skewY(-30deg);
				background: yellow;
			}
			
			.slice-three {
				transform: rotate(-90deg) skewY(-30deg);
				background: black;
			}
			
			.slice-four {
				transform: rotate(-150deg) skewY(-30deg);
				background: yellow;
			}
			
			.slice-five {
				transform: rotate(-210deg) skewY(-30deg);
				background: black;
			}
			
			.slice-six {
				transform: rotate(-270deg) skewY(-30deg);
				background: yellow;
			}
		</style>
	</head>

	<body>

		<ul class='pie'>
			<li class='slice-one slice'>B </li>
			<li class='slice-two slice'> A</li>
			<li class='slice-three slice'>F </li>
			<li class='slice-four slice'> E</li>
			<li class='slice-five slice'> D</li>
			<li class='slice-six slice'> C</li>
			<ul>
	</body>

</html>